<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="edge" />
<link rel="shortcut icon" href="asset/example/favicon.ico" />
<title>后台管理</title>
<link href="asset/themes/insdep/easyui.css" rel="stylesheet" type="text/css">
<link href="asset/themes/insdep/easyui_animation.css" rel="stylesheet" type="text/css">
<link href="asset/themes/insdep/easyui_plus.css" rel="stylesheet" type="text/css">
<link href="asset/themes/insdep/insdep_theme_default.css" rel="stylesheet" type="text/css">
<link href="asset/themes/insdep/icon.css" rel="stylesheet" type="text/css">
<link href="asset/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="asset/jquery.min.js"></script>
<script type="text/javascript" src="asset/jquery.easyui.min.js"></script>
<script type="text/javascript" src="asset/themes/insdep/jquery.insdep-extend.min.js"></script>

<style type="text/css">
    .layout-panel-west{ border-right: 1px solid #c5c5c5; }
</style>
</head>
<body>
<div id="master-layout">
	<div data-options="region:'north',border:false,bodyCls:'theme-header-layout'">
		<div class="theme-navigate">
			<div class="left">
				<a href="https://www.insdep.com/" class="easyui-linkbutton" target="_blank">首页</a>
				<a href="https://www.insdep.com/list-1-1.html" class="easyui-linkbutton" target="_blank">入门</a>
				<a href="https://www.insdep.com/list-2-1.html" class="easyui-linkbutton" target="_blank">主题</a>
				<a href="https://www.insdep.com/list-3-1.html" class="easyui-linkbutton" target="_blank">组件</a>
				<a href="https://www.insdep.com/list-4-1.html" class="easyui-linkbutton" target="_blank">扩展</a>
				<a href="https://www.insdep.com/list-5-1.html" class="easyui-linkbutton" target="_blank">手册</a>
				<a href="https://www.insdep.com/list-107-1.html" class="easyui-linkbutton" target="_blank">日志</a>
				<a href="https://www.insdep.com/list-106-1.html" class="easyui-linkbutton" target="_blank">捐赠</a>
				<a href="https://bbs.insdep.com/?/explore/category-4" class="easyui-linkbutton" target="_blank">下载</a>
				<a href="https://bbs.insdep.com/" class="easyui-linkbutton" target="_blank">问答</a>
				<a href="https://www.insdep.com/list-8-1.html" class="easyui-linkbutton" target="_blank">关于</a>
			</div>
			<div class="right">
				<a href="#" class="easyui-menubutton theme-navigate-more-button" data-options="menu:'#more',hasDownArrow:false"></a>
				<div id="more" class="theme-navigate-more-panel">
					<div>联系我们</div>
					<div>参与改进计划</div>
					<div>关于</div>
				</div>
			</div>
		</div>
	</div>
	<div data-options="region:'west',border:false,bodyCls:'theme-left-layout'" style="width:200px;">
		<!--正常菜单--> 
		<div class="theme-left-normal">
			<!--theme-left-switch 如果不需要缩进按钮，删除该对象即可-->    
			<div class="left-control-switch theme-left-switch"><i class="fa fa-chevron-left fa-lg"></i></div>

			<!--start class="easyui-layout"-->
			<div class="easyui-layout" data-options="border:false,fit:true"> 
				<!--start region:'north'-->
				<div data-options="region:'north',border:false" style="height:100px;">
					<!--start theme-left-user-panel-->
					<div class="theme-left-user-panel">
						<dl>
							<dt>
								<img src="themes/insdep/images/portrait86x86.png" width="43" height="43">
							</dt>
							<dd>
								<b class="badge-prompt">匿名 <i class="badge color-important">10</i></b>
								<span>examples</span>
								<p>安全等级：<i class="text-success">高</i></p>
							</dd>

						</dl>
					</div>
					<!--end theme-left-user-panel-->
				</div>   
				<!--end region:'north'-->

				<!--start region:'center'-->
				<div data-options="region:'center',border:false">

					<!--start easyui-accordion--> 
					<div class="easyui-accordion" data-options="border:false,fit:true">   
						<div title="公共信息">   
							<ul class="easyui-datalist" data-options="border:false,fit:true">
								<li><a href="1.html">企业文化</a></li>
								<li><a href="1.html">公文</a></li>
								<li><a href="1.html">新闻公告</a></li>
								<li><a href="1.html">重大信息</a></li>
							</ul>  
						</div>   
						<div title="个人事务">   
							<ul class="easyui-datalist" data-options="border:false,fit:true">
								<li><a href="1.html">内部邮件</a></li>
								<li><a href="1.html">我的日志</a></li>
								<li><a href="1.html">我的提醒</a></li>
							</ul>      
						</div>   
						<div title="通讯录"></div>
						<div title="流程中心">   
							<ul class="easyui-datalist" data-options="border:false,fit:true">
								<li><a href="1.html">启动流程</a></li>
								<li><a href="1.html">待办流程</a></li>
								<li><a href="1.html">我发起的流程</a></li>
							</ul>      
						</div>
						<div title="文档中心"></div>
						<div title="个人设置">   
							<ul class="easyui-datalist" data-options="border:false,fit:true">
								<li><a href="1.html">修改密码</a></li>
							</ul>      
						</div>

					</div>
					<!--end easyui-accordion--> 

				</div>
				<!--end region:'center'-->
			</div>  
			<!--end class="easyui-layout"-->

		</div>
		<!--最小化菜单--> 
		<div class="theme-left-minimal">
			<ul class="easyui-datalist" data-options="border:false,fit:true">
				<li><i class="fa fa-home fa-2x"></i><p>公共信息</p></li>
				<li><i class="fa fa-book fa-2x"></i><p>个人事务</p></li>
				<li><i class="fa fa-pencil fa-2x"></i><p>通讯录</p></li>
				<li><i class="fa fa-cog fa-2x"></i><p>流程中心</p></li>
				<li><i class="fa fa-cog fa-2x"></i><p>文档中心</p></li>
				<li><i class="fa fa-cog fa-2x"></i><p>个人设置</p></li>
				<li><a class="left-control-switch"><i class="fa fa-chevron-right fa-2x"></i><p>打开</p></a></li>
			</ul>
		</div>
	
	</div>
	<div data-options="region:'center',border:false">
		<div id="center_controll_tabs" data-options="fit:true"></div>
	</div>
	<script>
	$(function(){
		// 主面板初始化
		$("#master-layout").layout({fit:true});
	
		// 左侧面板收缩、展开
		var left_control_status=true;
		var left_control_panel=$("#master-layout").layout("panel",'west');

		$(".left-control-switch").on("click",function(){
			if(left_control_status){
				left_control_panel.panel('resize',{width:70});
				left_control_status=false;
				$(".theme-left-normal").hide();
				$(".theme-left-minimal").show();
			}else{
				left_control_panel.panel('resize',{width:200});
				left_control_status=true;
				$(".theme-left-normal").show();
				$(".theme-left-minimal").hide();
			}
			$("#master-layout").layout('resize', {width:'100%'})
		});
		
		// 中间面板选项卡
		var center_controll_tabs = $("#center_controll_tabs").tabs();
		
		$(".theme-left-normal a").click(function(e){
			var exists = center_controll_tabs.tabs("exists", $(this).text());
			if(exists) {
				center_controll_tabs.tabs("select", $(this).text());
			} else {
				center_controll_tabs.tabs("add", {title:$(this).text(),href:$(this).attr("href"),closable:true});
			}
			e.preventDefault();
		});
	});
	
	</script>
</div>
</body>